<template>
    <div class="Logindiv1">
        <h1 class="Logindivh1" @click="gogogoPxPersionMain">hggood</h1>
        <h2 class="divh2">品牌特卖</h2>
      <el-form status-icon ref="form" :model="form" :rules="rules" class="login-box"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
        <h3 class="login-title">欢迎登陆</h3>
        <el-form-item label="账号" prop="username" style="margin-left:50px">
          <el-input style="width:220px;margin-left:-50px"
          ref="aaa" type="text" placeholder="请输入用户名" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" style="margin-left:50px">
          <el-input style="width:220px;margin-left:-50px"
          type="password" placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <!-- <el-form-item label="确认密码" prop="checkpassword" style="margin-left:20px">
          <el-input style="width:220px;margin-left:-50px"
          type="password" placeholder="请再次输入密码" v-model="form.checkpassword"></el-input>
        </el-form-item> -->
        <el-button type="primary" @click="submitForm('form')">登陆</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
        <el-button  class="Logingoregister" @click="Logingoregister()">我要注册</el-button>
      </el-form>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'PxLogin',
     data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          // if (this.form.checkpassword !== '') {
          //   this.$refs.form.validateField('checkpassword');
          // }
          callback();
        }
      };
      // var validatePass2 = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请再次输入密码'));
      //   } else if (value !== this.form.password) {
      //     callback(new Error('两次输入密码不一致!'));
      //   } else {
      //     callback();
      //   }
      // };
      return {
        oldrouter:'wap',
        captchaUrl:'',
        loading: false,
        form: {
          username:'',
          password:'',
          // checkpassword:'',
          code:'',
        },
        rules:{
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
            }],
          password: [{
            required: true,
            validator: validatePass,
            trigger: 'blur'
            }],
          // checkpassword:[{
          //   required: true,
          //   validator: validatePass2,
          //   trigger: 'blur'
          //   }],
        },
        abc:'',
      }
    },
    mounted(){
      if(this.$route.params.username != null){
        this.form.username = this.$route.params.username
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading=true,
            this.$addr.get(`users/login?username=${this.form.username}&password=${this.form.password}`,{headers:{'crossDomain':true},}).then(
              response=>{
                  this.loading=false,
                  console.log('请求成功了',response)
                  console.log('###username:',this.form.username,'###password',this.form.password);
                  if(response.data.state == 4001){
                    this.$message({
                        message: `${response.data.message}`,
                        type: 'error'
                    });
                  }else if(response.data.state == 4002){
                    this.$message({
                        message: `${response.data.message}`,
                        type: 'error'
                    });
                  }else{
                    this.$addr.get(`users/get_by_uid`).then(
                    response=>{
                        console.log('请求成功了,我得到了用户数据',response)
                        this.$message({
                        message: '登陆成功',
                          type: 'success'
                        });
                        if(response.data.data.phone != null){
                          this.$router.replace({name:'PxTake_outTest',params:{logindata:1}})
                          // this.$router.replace({name:'PxPersionMain',params:{username:this.form.username}})
                        }else{
                          this.$router.replace({name:'XiaoBindPhone',params:{username:this.form.username,oldrouter:'wap'}})
                        }
                    },error=>{
                        this.$message({
                            message: '呕吼请求失败了',
                                type: 'warning'
                            });
                        console.log('请求失败了,我没有获取到用户的数据',error)
                    })
                  }
              },
              error=>{
                  this.loading=false,
                  this.$message({
                      message: '呕吼请求失败了',
                        type: 'warning'
                      });
                  console.log('请求失败了',error.message)
              })
          } else {
            this.$message({
              message: '用户名或密码错误',
              type: 'warning'
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      Logingoregister(){
        this.$router.push({name:'PxReg'})
      },
      gogogoPxPersionMain(){
          this.$router.push({name:'PxPersionMain'})
      }
    }
    }  
</script>

<style scoped>
.Logindiv1{
    text-align: center;
    margin: 0 auto;
}
.Logindivh1{
    margin-top: 40px;
    color: rgb(255, 36, 120);
}
 .Logingoregister{
        background-color: #3b8814;
        color: white;
  }
</style>